@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand:700&display=swap');

@font-face {
    font-family: 'pricedownblack';
    src: url('pricedown_bl-webfont.woff2') format('woff2'),
         url('pricedown_bl-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'gta-ui';
    src: url('gta-ui.ttf');
}

@font-face {
    font-family: 'pdown';
    src: url('pdown.ttf');
}

.hudcontainer{
    display:none;
}

html {
    overflow: hidden;
}

p {
    margin: 0 !important;
}
.fa-heartbeat {
    position: absolute;
    top: 35%;
    left: 26%;
    color: white;
    z-index: 1;
}
.progress1 {
    position: absolute; 
    left: 30px;
    bottom: 225px !important;
    width: 45px !important;
    height: 45px !important;
}
.circle-progress1 {
    position: absolute; 
    width: 100% !important;
    height: 100% !important;
}
.circle-progress-value1 {
    stroke-width: 10px;
    stroke: #ff3030;
}
.circle-progress-circle1 {
    stroke-width: 10px;
    stroke: black;
    fill: rgba(0, 0, 0, 0.493);
}

.fa-user-shield {
    position: absolute;
    top: 30%;
    left: 26%;
    color: white;
    z-index: 1;
}
.progress2 {
    position: absolute; 
    left: 85px;
    bottom: 225px !important;
    width: 45px !important;
    height: 45px !important;
}
.circle-progress2 {
    position: absolute; 
    width: 100% !important;
    height: 100% !important;
}
.circle-progress-value2 {
    stroke-width: 10px;
	stroke: #25b1d4;
}
.circle-progress-circle2 {
    stroke-width: 10px;
    stroke: black;
    fill: rgba(0, 0, 0, 0.493);
}

.fa-lungs {
    position: absolute;
    top: 30%;
    left: 22%;
    color: white;
    z-index: 1;
}
.progress3 {
    position: absolute; 
    left: 140px;
    bottom: 225px !important;
    width: 45px !important;
    height: 45px !important;
}
.circle-progress3 {
    position: absolute; 
    width: 100% !important;
    height: 100% !important;
}
.circle-progress-value3 {
    stroke-width: 10px;
	stroke: #83cbec;
}
.circle-progress-circle3 {
    stroke-width: 10px;
    stroke: black;
    fill: rgba(0, 0, 0, 0.493);
}

.fa-hamburger {
    position: absolute;
    top: 30%;
    left: 26%;
    color: white;
    z-index: 1;
}
.progress4 {
    position: absolute; 
    left: 195px;
    bottom: 225px !important;
    width: 45px !important;
    height: 45px !important;
}
.circle-progress4 {
    position: absolute; 
    width: 100% !important;
    height: 100% !important;
}
.circle-progress-value4 {
    stroke-width: 10px;
	stroke: #e0b833;
}
.circle-progress-circle4 {
    stroke-width: 10px;
    stroke: black;
    fill: rgba(0, 0, 0, 0.493);
}

.fa-glass-whiskey {
    position: absolute;
    top: 25%;
    left: 26%;
    color: white;
    z-index: 1;
}
.progress5 {
    position: absolute; 
    left: 250px;
    bottom: 225px !important;
    width: 45px !important;
    height: 45px !important;
}
.circle-progress5 {
    position: absolute; 
    width: 100% !important;
    height: 100% !important;
}
.circle-progress-value5 {
    stroke-width: 10px;
	stroke: #58f1f1;
}
.circle-progress-circle5 {
    stroke-width: 10px;
    stroke: black;
    fill: rgba(0, 0, 0, 0.493);
}


.fa-brain {
    position: absolute;
    top: 30%;
    left: 26%;
    color: white;
    z-index: 1;
}
.progress6 {
    position: absolute; 
    left: 305px;
    bottom: 225px !important;
    width: 45px !important;
    height: 45px !important;
}
.circle-progress6 {
    position: absolute; 
    width: 100% !important;
    height: 100% !important;
}
.circle-progress-value6 {
    stroke-width: 10px;
	stroke: #fa4ff1;
}
.circle-progress-circle6 {
    stroke-width: 10px;
    stroke: black;
    fill: rgba(0, 0, 0, 0.493);
}


.money-container {
    position: absolute;
    right: 5vw;
    top: 7vh;
}

#container {
    margin: 20px;
    width: 200px;
    height: 200px;
}

#cash {
    color: white;
}

.money-cash,.money-bank {
    display: none;
    float:right;
    font-family: 'pdown';
    font-weight: 400;
    font-size: 29px;
    color: white;
    padding: 4px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    margin: 0;
    margin-right: 6px;
    margin-top: 6px;
    padding: 0;
}

.money-cash {
    color: rgb(210, 210, 210);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: right;
}

.money-bank {
    color: rgb(167, 167, 167);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: right;
    top: 55px;
}

#plus-changeamount {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: right;
    color: #f0f0f0;
}

#minus-changeamount {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: right;
    color: #f0f0f0;
}

.minus {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: right;
    color: #801e1f;
}

.munnie {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: right;
    color: #277418;
}

.moneyupdate {
    float: right;
    padding-left: 0.5vw;
}

.plus {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    text-align: right;
    color: #277418;
}

.ui-container {
    display: none;
    font-size: 10vh;
    overflow: hidden;
    font-family: sans-serif;
    font-variant: small-caps;
    font-weight: bold;
    letter-spacing: .1vh;
}

.ui-car-container {
    display: none;
}

.ui-car-time {
    display: block !important;
    position: absolute;
    font-size: 1.5vh;
    bottom: 4.5vw;
    left: 17vw;
    color: #ffffff;
    text-shadow: 1px 1px 0px #000000;
}

.ui-car-meters {
    display: block !important;
    position: absolute;
    font-size: 1.5vh;
    bottom: 4.5vw;
    left: 20.5vw;
    color: #ffffff;
    text-shadow: 1px 1px 0px #000000;
}

.car-info {
    position: relative;
    float: left;
}

.ui-car-otherinfo {
    position: absolute;
    height: 3vh;
    min-width: 5vh;
    width: fit-content;
    bottom: 4.15vh;
    left: 17vw;
    line-height: 3vh;
    color: white;
    font-size: 1.6vh;
    /* background-color: black; */
    text-shadow: 1px 1px 0px #000000;
}

.info-label {
    position: relative;
    top: -.35vh;
    font-size: 1vh;
    text-shadow: 1px 1px 0px #000000;
}

.ui-car-street {
    font-size: 15px;
    position: absolute;
    bottom: 0.28vh;
    left: 23.5vw;
    text-shadow: 1px 1px 0px #000000;
    color: #ffffff;
}

.car-engine-info img {
    width: 3vh;
}

.car-seatbelt-info img {
    width: 3vh;
}

.seatbelt-text {
    font-size: 1.45vh;
    color: #46ad34;
    text-shadow: 1px 1px 0px #000000;
}

.compass-container {
    position: absolute;
    width: 10.2vh;
    height: 4.5vh;
    bottom: 0.28vh;
    left: 17vw;
    overflow: hidden;
}

.compass-ui {
    position: absolute;
    width: 81.6vh;
    height: 100%;
    right: 0vh;
}

.compass-current {
    position: absolute;
    width: 100%;
    height: 3vh;
    color: white;
    text-align: center;
    font-size: 2vh;
}

.compass-current > span {
    position: relative;
    top: -1.6vh;
    text-shadow: 1px 1px 0px #000000;
}

.big-degree {
    position: relative;
    float: left;
    height: 60%;
    width: 3vh;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    text-shadow: 1px 1px 0px #000000;
    text-align: center;
    border-radius: .2vh;
    font-size: 2.1vh;
    line-height: 3vh;
    top: 1.5vh;
    box-shadow: inset 0 0 .3vh 0 rgba(0, 0, 0, 0.5);
}

.big-degree-line {
    color: white !important;
    font-size: 1.2vh !important;
    text-shadow: 1px 1px 0px #000000;
}

.degree-line {
    position: relative;
    float: left;
    height: 100%;
    width: 0.8vh;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    font-size: 1.1vh;
    margin-top: 1.6vh;
    line-height: 3.5vh;
    text-shadow: 1px 1px 0px #000000;
}

.degree-label {
    position: absolute;
    bottom: 2.4vh;
    left: -.6vh;
    font-size: 1.3vh;
    color: white;
    font-family: sans-serif;
    font-variant: normal !important;
    text-shadow: 1px 1px 0px #000000;
}

/* NEW UI */

.ui-bars-container {
    position: absolute;
    width: 25.3vh;
    height: 2.5vh;
    bottom: .3vh;
    left: 2.65vh;
}

/* Container Styling */

.ui-healthbar {
    position: relative;
    height: 100%;
    border: .2vh solid rgb(228, 228, 228);
}

.ui-armorbar {
    position: relative;
    height: 100%;
    border: .2vh solid rgb(228, 228, 228);
}

.ui-foodbar {
    position: relative;
    height: 100%;
    border: .2vh solid rgb(228, 228, 228);
}

.ui-thirstbar {
    position: relative;
    height: 100%;
    border: .2vh solid rgb(228, 228, 228);
}

.ui-bleedbar {
    position: relative;
    height: 100%;
    border: .2vh solid rgb(228, 228, 228);
}

.ui-stressbar {
    position: relative;
    height: 100%;
    border: .2vh solid rgb(228, 228, 228);
}

/* Icon Styling */

.ui-healthbar > i {
    position: absolute;
    font-size: 1.3vh;
    top: 0;
    left: 0;
    padding: .51vh;
    color: rgba(249, 249, 249, 1.0);
    text-shadow: .12vh .01vh .08vh rgba(0, 0, 0, 0.2);
}

.ui-armorbar > i {
    position: absolute;
    font-size: 1.3vh;
    top: 0;
    left: 0;
    padding: .49vh;
    color: rgba(249, 249, 249, 1.0);
    text-shadow: .12vh .01vh .08vh rgba(0, 0, 0, 0.2);
}

.ui-foodbar > i {
    position: absolute;
    font-size: 1.3vh;
    top: 0;
    left: .05vh;
    padding: .45vh;
    color: rgba(249, 249, 249, 1.0);
    text-shadow: .12vh .01vh .08vh rgba(0, 0, 0, 0.2);
    z-index: 101;
}

.ui-thirstbar > i {
    position: absolute;
    font-size: 1.3vh;
    top: 0;
    left: .1vh;
    padding: .45vh;
    color: rgba(249, 249, 249, 1.0);
    text-shadow: .12vh .01vh .08vh rgba(0, 0, 0, 0.2);
    z-index: 101;
}

.ui-bleedbar > i {
    position: absolute;
    font-size: 1.3vh;
    top: 0;
    left: .2vh;
    padding: .45vh;
    color: rgba(249, 249, 249, 1.0);
    text-shadow: .12vh .01vh .08vh rgba(0, 0, 0, 0.2);
    z-index: 101;
}

.ui-stressbar > i {
    position: absolute;
    font-size: 1.3vh;
    top: 0;
    left: 0;
    padding: .45vh;
    color: rgba(255, 255, 255, 0.8 );
    text-shadow: .08vh .02vh .1vh rgba(0, 0, 0, 0.2);
    z-index: 101;
}

/* Fill Color */

.ui-healthbar > .ui-barfill {
    background-color: rgb(72, 170, 56);
}

.ui-armorbar > .ui-barfill {
    background-color: #248bbe;
}

.ui-foodbar > .ui-smallbarfill {
    background-color: #f0932b;
}

.ui-thirstbar > .ui-smallbarfill {
    background-color: #3467d4;
}

.ui-bleedbar > .ui-smallbarfill {
    background-color: #e84118;
}

.ui-stressbar > .ui-smallbarfill {
    background-color: #e056fd;
}

/* Bar Types */

.ui-bigbar {
    float: left;
    width: 25%;
    margin-right: 1%;
    background-color: rgba(0, 0, 0, 0.3);
}

.ui-smallbar {
    float: left;
    width: 11%;
    margin-right: 1%;
    background-color: rgba(0, 0, 0, 0.3);
}

.ui-barfill {
    height: 100%;
    width: 50%;
    background-color: rgb(255, 255, 255);
    transition: .2s ease-in-out;
}

.ui-smallbarfill {
    position: absolute;
    height: 50%;
    width: 100%;
    bottom: 0;
    background-color: rgb(255, 255, 255);
    transition: .2s ease-in-out;
}

.voice-block {
    height: .7vh;
    width: .7vh;
    background-color: rgb(255, 255, 255);
    left: 100%;
}

[data-voicetype="3"] {
    position: absolute;
    top: 0;
}

[data-voicetype="2"] {
    position: absolute;
    top: .9vh;
}

[data-voicetype="1"] {
    position: absolute;
    bottom: 0;
}